<template>
    <div class="fillingSteps">
        <a-steps progress-dot class="customSteps">
            <a-step v-for="(item, index) in sblist" :key="index">
                <div class="customTitle" slot="title">
                    <img v-if="index == currentInd" src="../../../assets/img/current.png" alt="">
                    <img v-else-if="item.zlmlZt == 1" src="../../../assets/img/ok.png" alt="">
                    <img v-else src="../../../assets/img/default.png" alt="">
                    <b style="font-size: 14px;">{{ item.zlmlMc.split('、')[1] }}</b>
                </div>
            </a-step>
        </a-steps>
        <span class="tips" style="color: #CB0C0C;">材料确认后，成果材料不可修改，请谨慎操作，如有疑问请联系010-63413753、010-63414345</span>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    name: 'FillingSteps',
    props: ['currentInd'],
    mounted() {
        this.getStatus(this.$route.query.cxj_cxj_id)
    },
    computed: {
        ...mapState('fillingSteps', {
            sblist: (state) => state.sblist
        })
    },
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
    },
}
</script>

<style scoped lang="less">
.customSteps {
    /deep/.ant-steps-item-icon {
        display: none !important;
    }
    /deep/.ant-steps-item-content {
        width: 100px !important;
    }
    /deep/.ant-steps-item-tail {
        margin: 0 0 0 50px !important;
    }
    .customTitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: 15px;
            height: 15px;
            margin-left: 4px;
        }
        b {
            font-weight: normal;
            color: #000;
            margin-top: 5px;
        }
    }
}
.tips {
    position: absolute;
    bottom: 0;
    left: 34px;
}
</style>
